import { Pagination, Tag, Row, Col, Tree, Card, Table, Button, message } from "antd";
import type { TreeProps } from 'antd/lib/tree';
import { reqFindScheduleList, reqGetScheduleRuleList, reqGetDepartmentList } from '@/api/hospital/hospitalList';
import { useEffect, useState } from "react";
import { DepartmentList, ScheduleList, DoctorList } from '@/api/hospital/model/hospitalListtypes';
import { useParams, useNavigate } from "react-router-dom";


/* const treeData: DataNode[] = [
    {
        title: 'parent 1',
        key: '0-0',
        children: [
            {
                title: 'parent 1-0',
                key: '0-0-0',
                disabled: true,
                children: [
                    {
                        title: 'leaf',
                        key: '0-0-0-0',
                    },
                    {
                        title: 'leaf',
                        key: '0-0-0-1',
                    },
                ],
            },
            {
                title: 'parent 1-1',
                key: '0-0-1',
                children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
            },
        ],
    },
]; */
export default function ShowHospital() {

    const params = useParams();
    const hoscode = params.hoscode as string;

    const [departmentList, setdepartmentList] = useState<DepartmentList>([])
    const [expandedKeys, setexpandedKeys] = useState<string[]>([])
    const [total, settotal] = useState(0);
    const [pageSize, setpageSize] = useState(5);
    const [current, setcurrent] = useState(1);
    const [depcode, setdepcode] = useState('');
    const [depname, setdepname] = useState('');
    const [workDate, setworkDate] = useState('');
    const [hosname, sethosname] = useState('');
    const [scheduleList, setScheduleList] = useState<ScheduleList>([]);
    const [doctorList, setdoctorList] = useState<DoctorList>([]);




    const getScheduleRuleList = async (current: number, pageSize: number, depcode: string) => {
        setdoctorList([]);
        const res = await reqGetScheduleRuleList({ page: current, limit: pageSize, hoscode, depcode })
        setScheduleList(res.bookingScheduleList)
        sethosname(res.baseMap.hosname)
        settotal(res.total)
        setworkDate(res.bookingScheduleList[0]?.workDate)

        const getDoctorList = async (hoscode: string, depcode: string, workDate: string) => {
            try {
                const doctorList = await reqFindScheduleList({ hoscode, depcode, workDate })
                setdoctorList(doctorList)
            }
            catch {
                setdoctorList([]);
            }
        }
        if (res.bookingScheduleList[0]?.workDate) {
            getDoctorList(hoscode, depcode, res.bookingScheduleList[0]?.workDate)
        }
        // return res.bookingScheduleList[0]?.workDate
    }

    const getDepartmentList = async () => {
        const departmentList = await reqGetDepartmentList(hoscode)
        setdepartmentList(departmentList.map((dep) => {
            return {
                ...dep,
                disabled: true,
            }
        }))
        setexpandedKeys(departmentList.map((dep) => {
            return dep.depcode;
        }))
        const depcode = departmentList[0].children[0].depcode;
        setdepcode(depcode)
        const depname = departmentList[0].children[0].depname;
        setdepname(depname)
        return depcode
    }

    const getData = async () => {
        const depcode = await getDepartmentList()
        await getScheduleRuleList(1, 5, depcode)
        // getDoctorList(hoscode, depcode, workDate)
    }

    useEffect(() => {
        getDepartmentList()
    }, [])
    useEffect(() => {
        getData()
    }, [])
    const columns = [
        {
            title: "序号",
            render: (_a: any, _b: any, index: number) => {
                return index + 1;
            },
        },
        {
            title: "职称",
            dataIndex: "title",
        },
        { title: "号源时间", dataIndex: "workDate" },

        {
            title: "可预约数",
            dataIndex: "reservedNumber",
        },
        {
            title: "剩余预约数",
            dataIndex: "availableNumber",
        },
        {
            title: "挂号费(元)",
            dataIndex: "amount",
        },
        {
            title: "擅长技能",
            dataIndex: "skill",
        },
    ];

    const handle = (workDate: string) => {
        return () => {
            setworkDate(workDate)
            // getDoctorList(hoscode, depcode, workDate)


        }
    }

    const onSelect: TreeProps['onSelect'] = async (selectedKeys, info: any) => {
        setdepcode(selectedKeys[0] as string)
        setdepname(info.node.depname)

        getScheduleRuleList(current, pageSize, info.node.depcode)


    }


    const navigate = useNavigate();
    const goBack = () => {
        navigate("/syt/hospital/hospitalList");
    };
    const treeHeight = document.documentElement.clientHeight - 182;
    return (
        <Card>
            <p>选择：{hosname} / {depname} / {workDate}</p>
            <Row>
                <Col span={5}>
                    <div
                        style={{
                            marginRight: 20,
                            height: treeHeight,
                            overflowY: "scroll",
                            border: "1px solid silver"

                        }}
                    >
                        <Tree
                            selectedKeys={[depcode]}
                            expandedKeys={expandedKeys}
                            onSelect={onSelect}
                            treeData={departmentList as []}
                            fieldNames={{ title: "depname", key: "depcode" }}

                        />
                    </div>
                </Col>
                <Col span={19} >
                    {scheduleList.map((scheduleListItem) => {
                        return <Tag
                            color={workDate === scheduleListItem.workDate ? "green" : ""}
                            key={scheduleListItem.workDate} style={{ marginBottom: 10, cursor: "pointer" }}
                            onClick={handle(scheduleListItem.workDate)}>
                            <div>{scheduleListItem.workDate} {scheduleListItem.dayOfWeek}</div>
                            <div>{scheduleListItem.availableNumber} / {scheduleListItem.reservedNumber}</div>
                        </Tag>
                    })

                    }
                    <Pagination
                        current={current}
                        pageSize={pageSize}
                        total={total}
                        pageSizeOptions={[5, 10, 15, 20]}
                        showSizeChanger={true}
                        showQuickJumper={true}
                        showTotal={(total: number) => `总共：${total}`}
                        onChange={(current, pageSize) => {
                            getScheduleRuleList(current, pageSize, depcode)
                            setcurrent(current)
                            setpageSize(pageSize)
                        }
                        }

                    />


                    <Table columns={columns} dataSource={doctorList} rowKey="id" pagination={false} bordered />
                    <Button style={{ marginTop: 10 }} onClick={goBack}>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}